<template>
    <div class="exam-explain-container">
        <nav-bar title="试卷"></nav-bar>
        <!-- <video
            style="object-fit:fill"
            id="video"
            src="http://vjs.zencdn.net/v/oceans.mp4"
            controls="true"
            poster="images.jpg"
            preload="auto"
            webkit-playsinline="true"
            playsinline="true"
            x-webkit-airplay="allow"
            x5-video-player-type="h5"
            x5-video-player-fullscreen="true"
            x5-video-orientation="portraint"
                checked-color="#FF633D"

        ></video>-->
        <div class="exam-content" ref="content">
            <div class="loading-wrap" v-if="loading">
                <van-loading/>
            </div>
            <div v-else>
                <p class="ques-name">
                    第{{ activeIdx }}题
                    <span
                        v-if="activeIdx > 0"
                    >({{ typeName[list[activeIdx - 1].questionType] }})</span>
                </p>
                <div v-for="(content, index) in qesComponents" :key="index">
                    <!-- component标签创建动态组件，is属性指向谁，就显示哪个组件 -->
                    <component
                        :key="content.index"
                        :is="content.component"
                        ref="q"
                        :refName="content.refName"
                        :data="list[activeIdx - 1]"
                        v-if="
							activeIdx != 0 &&
							content.refName == Type[list[activeIdx - 1].questionType]
						"
                        @nextQues="next"
                        :explain="true"
                    ></component>
                </div>
                <div class="explain-text" v-if="activeIdx > 0">
                    <h2>解析</h2>
                    <p>{{ list[activeIdx - 1].questionAnalysis }}</p>
                </div>
                <btn class="btn" @click="next" v-show="list.length !== activeIdx">下一题</btn>
            </div>
        </div>
        <answer-card ref="AnswerCard" :list="list" @backTo="backTo" :playback="true"></answer-card>
        <div class="fixed-btn" @click="openCard">试题序号</div>
    </div>
</template>
<script>
import AnswerCard from "@/components/AnswerCard";
import { decode, encode } from "@/common/utils/crypto";
import { qesComponents, Type } from "@/components/Questions";
export default {
    name: "exam-explain",
    components: {
        AnswerCard,
    },
    data() {
        return {
            qesComponents: [], //试题类型
            Type: [],
            list: [{}],
            activeIdx: 0,
            loading: true,
            train: 0,
            typeName: {
                TypeA1: "A1题",
                TypeA2: "A2题",
                TypeA3: "A3题",
                TypeA4: "A4题",
                TypeB1: "B1题",
                TypeM1: "M1题",
                TypeSingleChoice: "单选题",
                TypeMultipleChoice: "多选题",
                TypeJudge: "判断题",
                TypeSort: "排序题",
                TypeEssay: "填空题",
                TypeFlow: "系列题",
                TypeWork: "应用题",
                TypeSubjective: "主观题",
                TypeExplanation: "名词解释题",
            },
        };
    },
    mounted() {
        this.train = this.$route.query.train;
        this.qesComponents = qesComponents;
        this.Type = Type;
        this.getExamDes();
    },
    methods: {
        getExamDes() {
            this.$APIs[this.train == 1 ? "getTrainQuestionAnswer" : "getQuestionAnswer"](
                `?examId=${this.$route.query.examId}&${this.$route.query.type}`,
            )
                .then(response => {
                    if (response.length) {
                        response.forEach(element => {
                            element.questionAnswerContent = JSON.parse(
                                element.questionAnswerContent,
                            );
                            element.questionContent = JSON.parse(element.questionContent);
                        });
                        this.list = response;
                        this.next();
                        this.loading = false;
                    } else {
                        this.$toast("数据异常");
                        this.$router.back();
                    }
                })
                .catch(error => {
                    this.$toast("数据异常");
                });
        },
        openCard() {
            this.$refs.AnswerCard.activeIdx = this.activeIdx - 1;
            this.$refs.AnswerCard.showPopup = true;
        },
        next() {
            this.activeIdx++;
            this.$refs.content.scrollTop = 0;
        },
        submitExam() {},
        backTo(data) {
            this.activeIdx = data + 1;
        },
    },
};
</script>

<style lang="scss">
.exam-explain-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    .question-title {
        margin: 10px 0;
    }
    .ques-name {
        font-size: 18px;
        font-weight: bold;
        line-height: 1.7;
    }
    .van-count-down {
        font-size: 18px;
        color: #56baca;
    }
    p {
        font-size: 15px;
    }
    .exam-content {
        padding: 15px;
        flex: 1;
        overflow: scroll;
    }
    .loading-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 50px 0;
    }
    .title {
        font-size: 18px;
        margin: 0 0 20px;
    }
    .count-down {
        display: flex;
        justify-content: center;
        font-size: 18px;
        color: #56baca;
        margin: 15px 0 0;
    }
    .fixed-btn {
        background: #ecfabd;
        padding: 11px 14px;
        position: absolute;
        right: 0;
        bottom: 10%;
        font-size: 12px;
        border-radius: 36px 0px 0px 36px;
        color: #000000;
    }
    video {
        border-radius: 10px;
        width: 100%;
    }
    .video-content {
        margin: 20px 0;
        display: flex;
        justify-content: center;
    }

    .van-radio__label {
        font-size: 15px;
        color: #fff;
    }
    .van-radio {
        margin-bottom: 15px;
    }
    .ques-title {
        font-size: 16px;
        margin: 20px 0;
    }
    .btn {
        margin: 40px 0 20px;
    }
    .explain-text {
        font-size: 16px;
        line-height: 1.6;
        margin: 20px 0 10px;
        h2 {
            font-weight: bold;
            color: #56baca;
            font-size: 18px;
            margin-bottom: 15px;
        }
    }
    .right-one {
        .van-radio__icon--disabled.van-radio__icon--checked .van-icon {
            color: #56baca;
            border-color: #56baca;
        }
        .van-checkbox__icon--disabled.van-checkbox__icon--checked .van-icon {
            color: #56baca;
            border-color: #56baca;
        }
    }
    .error-one {
        .van-radio__icon--disabled.van-radio__icon--checked .van-icon {
            color: #ff633d;
            border-color: #ff633d;
        }
        .van-checkbox__icon--disabled.van-checkbox__icon--checked .van-icon {
            color: #ff633d;
            border-color: #ff633d;
        }
    }
}
</style>
